<template>
	<view class="">
		<uni-nav-bar :fixed="true" :border="false" color="#fff" backgroundColor="#21252F">
			<view style="width: 100%;text-align: center;line-height: 44px;font-size: 18px;"
				@click="openProductListPage">
				<!-- <image src="/static/change.png" style="width: 16px; height: 16px;" mode=""></image> -->
				{{productsInfo?.name}}
			</view>
		</uni-nav-bar>
		<view class="icon-xl circle flex-center back-btn" style="position: fixed;top: 5px;left: 16px;z-index: 100;"
			@click="backPage">
			<uni-icons type="arrow-left" size="24" color="#fff"></uni-icons>
		</view>
		<view class="icon-xl circle flex-center back-btn" style="position: fixed;top: 5px;right: 16px;z-index: 100;">
			<navigator url="/pages/personal/order/order">
				<!-- 没有订单，或者已完成 -->
				<image src="/static/orderList.png" style="width: 24px;height: 24px;" mode=""></image>
				<!-- 订单进行中 -->
				<!-- <image src="/static/orderList.png" class="circle spark" style="width: 24px;height: 24px;" mode=""></image> -->
			</navigator>
		</view>
		<!-- <view class="diy-dialog position-absolute flex-center fs12" style="right: 16px;">
			有持仓订单
		</view> -->
		<view class="p-lr-16">
			<view class="overview flex-between radius-12  mt30" style="height: 100px;">
				<view class="left flex up-color">
					<view
						:class="['bar', productsInfo?.data?.price>productsInfo?.data?.open?'bg-down':productsInfo?.data?.price==productsInfo?.data?.open?'bg-defalut':'bg-up']"
						style="height: 46px; width: 4px; margin-right: 16px;"></view>
					<view class="flex-column" style="justify-content: space-between;">
						<view :class="productsInfo?.data?.price>productsInfo?.data?.open?'text-down':'text-up'">
							<text
								style="font-size: 20px; overflow-wrap: break-word; max-width: 127px; font-weight: bold;">{{productsInfo?.data?.price}}</text>
						</view>
						<view class="flex-between fs12 mt5">
							<text class="text-des-color" style="margin-right: 12px;">{{productsInfo?.data?.cha}}</text>
							<view class="ratio flex-between fs12">
								<image
									:src="`../../static/${productsInfo?.data?.price>productsInfo?.data?.open?'red_up':'green_down'}.png`"
									style="width: 8px; height: 8px;" mode=""></image>
								<view
									:class="['ratio' ,productsInfo?.data?.price>productsInfo?.data?.open?'text-down':'text-up']"
									style="margin-left: 5px;">
									{{productsInfo?.data?.zf_rate}}%
								</view>
							</view>
						</view>
					</view>
				</view>
				<image class="center" style="width: 7px; height: 100px;" src="../../static/productLine.png" mode="">
				</image>
				<view class="right flex-between" style="height: 100%;box-sizing: border-box;">
					<view class="row1 flex-c">
						<view class="item">
							<view class="label text-des-color fs12"> {{$t('product.text2')}} </view>
							<view class="value fs12"> {{productsInfo?.data?.high}} </view>
						</view>
						<view class="item">
							<view class="label text-des-color fs12"> {{$t('product.text3')}} </view>
							<view class="value fs12"> {{productsInfo?.data?.low}} </view>
						</view>
					</view>
					<view class="row1 flex-c">
						<view class="item">
							<view class="label text-des-color fs12"> {{$t('product.text1')}}(MX) </view>
							<view class="value fs12"> {{productsInfo?.data?.amount}} </view>
						</view>
						<view class="item">
							<view class="label text-des-color fs12"> {{$t('product.text4')}} </view>
							<view class="value fs12"> {{productsInfo?.data?.vol}} </view>
						</view>
					</view>
				</view>
			</view>
			<view class="k-area mt5">
				<view class="flex">
					<view class="fs12 text-des-color k-btnK">K线</view>
					<view class="fs12 text-des-color k-btnK">趋势</view>
					<view class="flex" style="width: 250px;position: relative;flex: 1;">
						<view v-for="(item, index) in timeList" key="index"
							:class="['time-item', { active: selectedIndex === index }]" @click="selectTime(index)">
							{{ item.lable }}
						</view>
						<!-- 动态底部滑块 -->
						<view class="slider" :style="sliderStyle"></view>
					</view>
				</view>
				<view style="width: 100%;height: 400px;">
					<view class="" v-if="KData.length==0"
						style="width: 100%;height: 100%;line-height:400px;text-align: center;"> {{$t('loading')}} ...
					</view>
					<!-- <chartk v-if="KData.length>0" :kData="KData" :nowprice="Number(productsInfo?.data?.price)"
						:currColor="currColor"></chartk> -->
					<chartk3></chartk3>	
				</view>
			</view>
		</view>

		<view class="fixed-bottom flex-center fs14" style="width: 100%;">
			<button class="btn radius-12" style="background-color: #f33b50;"
				@click="toOrder(1)">{{$t('product.text5')}}</button>
			<button class="btn radius-12" style="background-color: #0bb563;"
				@click="toOrder(2)">{{$t('product.text6')}}</button>
		</view>
		<!-- 普通弹窗 -->
		<!-- <uni-popup ref="popupleft" :style="{'z-index':1030}" type="left" background-color="#fff" @change="changeleft">
			<view class="popup-content popup-height">
				<productList v-if="falg"></productList>
			</view>
		</uni-popup> -->
		<!-- 买涨/买跌弹窗 -->
		<uni-popup ref="popup" :style="{'z-index':1030}" type="center">
			<view class="popup-container">
				<view class="popup-header">
					<view class="popup-title">订单确认</view>
					<button class="close-btn" @click="closePopup">x</button>
				</view>

				<view class="popup-content">
					<text class="section-title">有效期</text>
					<view class="scroll-container">
						<view v-for="(option, index) in validityOptions" :key="index"
							:class="['validity-item', selectedValidityIndex === index ? 'selected' : '']"
							@click="selectValidity(index)">
							<view class="selected-badge" v-if="selectedValidityIndex === index">
								<i class="fas fa-check"></i>
							</view>
							<text class="settlement-time">结算时间</text>
							<text class="minutes">{{ option.time }}</text>
							<view class="profit">收益{{ option.profit }}</view>
						</view>
					</view>

					<text class="section-title">投资金额</text>
					<view class="amount-scroll-container">
						<view v-for="(amount, index) in amountOptions" :key="index"
							:class="['amount-item', selectedAmountIndex === index ? 'active' : '']"
							@click="selectAmount(index)">
							{{ amount }}
						</view>

						<view class="custom-amount-container-box">
							<view class="custom-amount-container">
								<view :class="['custom-amount', customAmountFocused ? 'focused' : '']">
									<input class="custom-amount-input" type="text" placeholder-style="color:#fff !important" placeholder="其他金额" @focus="focusCustomAmount"
										@blur="blurCustomAmount">
								</view>
							</view>
							
						</view>
					</view>

					<view class="balance">余额: ¥1592143.00</view>

					<view class="divider"></view>

					<table class="order-table">
						<thead>
							<tr>
								<th>名称</th>
								<th>方向</th>
								<th>现价</th>
								<th>金额</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>USD/JPY</td>
								<td class="direction-up">买涨</td>
								<td>541.5997</td>
								<td>¥10000</td>
							</tr>
						</tbody>
					</table>

					<button class="confirm-btn" @click="confirmOrder">确认订单</button>
				</view>
			</view>

		</uni-popup>
		<!-- <uni-popup ref="popup" :style="{'z-index':1030}" type="bottom" safeArea borderRadius="10px 10px 0 0"
			background-color="var(--theme-box-bg)">
			<view class="popup-content">
				<view class="flex-between p-lr-16">
					<view class="flex">
						<text class="fs16 fb">{{productsInfo?.name}}</text>
						<view :class="[orderType==1?'bg-down':'bg-up' ,'fb' ,'flex-center', 'fs12']"
							style="border-radius: 10px; height: 23px; padding: 2px 6px;color: #fff;margin-left: 5px;">
							{{orderType==1?$t('product.text5'):$t('product.text6')}}
						</view>
					</view>
					<text class="text-md text-des-color" @click="closePopup">{{$t('cancel')}}</text>
				</view>
				<view class="p-lr-16">
					<view class="fs14 text-des-color mt20">{{$t('product.text7')}}</view>
					<view class="items">
						<view :class="['item', 'flex-center', 'fs14', 'radius-12',moneyIndex==index?'active':'']"
							@click="selectItems(1,index)" v-for="(item,index) in moneyList" :key="index">
							{{item}}
						</view>
					</view>
					<view class="inputBox flex bg-light-black">
						<input class="u-input2" type="number" @focus="focusInpMoney" @blur="tipMoneyVal"
							@input="validateInput" v-model="moneyNum" :placeholder="$t('product.text20')" />
						<text class="text-des-color">CNY</text>
					</view>
					<view class="flex-between fs12 mt10">
						<text class="text-des-color">{{$t('product.text8')}}:{{userIndex.money}} CNY</text>
						<text style="color: #f56c6c;" @click="allIn">{{$t('product.text9')}}</text>
					</view>
					<view class="fs14 text-des-color mt20">{{$t('product.text10')}}</view>
					<view class="items">
						<view :class="['item', 'flex-center', 'fs14', 'radius-12',timesIndex==index?'active':'']"
							@click="selectItems(2,index)" v-for="(item,index) in timesList" :key="index">
							{{item}}秒
						</view>
					</view>
					<view class="mt15">
						<table style="width: 100%;">
							<tr>
								<th>{{$t('nameStock')}}</th>
								<th>{{$t('direction')}}</th>
								<th>{{$t('product.text11')}}</th>
								<th>{{$t('product.text7')}}</th>
							</tr>
							<tr>
								<td><text class="fs16 fb">{{productsInfo?.name}}</text></td>
								<td>
									<view :class="[orderType==1?'text-down':'text-up' ,'fb' ,'flex-center', 'fs12']"
										style="border-radius: 10px; height: 23px; padding: 2px 6px;color: #fff;margin-left: 5px;">
										{{orderType==1?$t('product.text5'):$t('product.text6')}}
									</view>
								</td>
								<td>{{productsInfo?.data.price}}</td>
								<td>{{moneyNum}}</td>
							</tr>
						</table>
					</view>
					<view class="" style="margin: 30px auto;">
						<button :class="['btn-submit', disabled?'login-btn-disabled':'login-btn']" style="width: 172px;"
							:disabled="creating" @click="submitForm">{{$t('confirm2')}}</button>
					</view>
				</view>
			</view>
		</uni-popup> -->
		<uni-popup ref="popup2" :style="{'z-index':1031}" type="center" background-color="var(--theme-box-bg)"
			@close="closepopup2">
			<view class="buyInfo fs14">
				<view class="" style="padding: 24px 24px 0 20px;">
					<view class="flex-column" style="justify-content: center;">
						<uni-icons type="checkbox" color="#25bc73" style="font-weight: bold;" size="36"></uni-icons>
						<text>{{$t('product.text14')}}</text>
					</view>
					<view class="mt15 text-des-color fs12">
						<view class="flex-between mt5">
							<text>{{$t('product.text7')}}</text>
							<text>{{(moneyNum ? moneyNum: moneyList[moneyIndex])}}</text>
						</view>
						<view class="flex-between mt5">
							<text>{{$t('product.text10')}}</text>
							<text>{{timesList[timesIndex]}}秒</text>
						</view>
						<view class="flex-between mt5">
							<text>购买方向</text>
							<text
								:class="orderType==2?'text-up':'text-down'">{{orderType==1?$t('product.text5'):$t('product.text6')}}</text>
						</view>
						<view class="flex-between mt5">
							<text>{{$t('product.text8')}}</text>
							<text> CNY</text>
						</view>
						<view class="flex-between mt5">
							<text>{{$t('product.price')}}</text>
							<text>{{productsInfo.data.price}}</text>
						</view>
						<!-- <view class="flex-between mt5">
							<text>{{$t('product.y_rate')}}</text>
							<text :class="orderType==1?'text-up':'text-down'">{{orderType==1?second[0].y_rate:second[0].k_rate}}%</text>
						</view> -->
					</view>
				</view>
				<view class="btn-group fs14 mt10">
					<view class="btn-b" @click="dialogClose">
						<text>{{$t('product.text15')}}</text>
					</view>
					<view class="btn-b border-l" @click="dialogConfirm">
						<text>{{$t('ok')}}</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup3" :style="{'z-index':1031}" type="center" backgroundColor="var(--theme-box-bg)">
			<view class="buyInfo fs14">
				<view class="" style="padding: 24px 24px 0 20px;">
					<view class="flex-column" style="justify-content: center;">
						<uni-icons type="close" color="#f33b50" style="font-weight: bold;" size="36"></uni-icons>
						<text>{{msgError}}</text>
					</view>
				</view>
				<view class="btn-group fs14 mt10">
					<view class="btn-b" @click="popup3.close()">
						<text>ok</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- <SoundFeedback ref="soundFeedback" src="/static/audio/xm3463.mp3" /> -->
		<!-- <SoundFeedback ref="errorSound" src="/static/audio/error.mp3" :volume="0.5"/> -->
	</view>
</template>
<script setup>
	import {
		computed,
		nextTick,
		onMounted,
		onUnmounted,
		ref,
		watch,
		onBeforeUnmount
	} from 'vue';
	import {
		getProductsInfo,
		createOrder,
		getKline,
		getUserInfo
	} from '../../api/index.js'
	// import chartk from '../../components/chart-k.vue'
	import chartk from '../../components/lchartK2.vue'
	import chartk3 from '../../components/lchartK3.vue'
	// import productList from '../../components/productList.vue'
	import {
		getLang,
		formatAmount,
		formatTime
	} from '../../utils/utils.js'
	import useGlobalProperties from '../../utils/useGlobalProperties.js'
	const {
		$t,
		$i18n
	} = useGlobalProperties()
	import {
		onLoad,
		onShow,
		onHide,
		onUnload
	} from '@dcloudio/uni-app'
	import WebSocketManager from '../../utils/websocket.js';
	import {
		useUserStore
	} from '../../store/index.js'
	import config from '../../config.js';
	// import SoundFeedback from '@/components/SoundFeedback.vue';
	const userStore = useUserStore()
	const timeList = [{
			lable: '1m',
			value: '1',
			text: '1min'
		},
		{
			lable: '5m',
			value: '5',
			text: '5min'
		},
		{
			lable: '15m',
			value: '15',
			text: '15min'
		},
		{
			lable: '30m',
			value: '30',
			text: '30min'
		},
		{
			lable: '1h',
			value: '1h',
			text: '60min'
		},
		// { lable:'4h', value:'4h',text:'4hour'},
		{
			lable: '1d',
			value: 'd',
			text: '1day'
		},
		// { lable:'1w', value:'w',text:'1week'},
	] // 时间选项
	// 使用 computed 来获取当前产品信息并监听变化
	const userIndex = ref(null)
	const moneyList = ref([])
	const timesList = ref([])
	const selectedIndex = ref(1) // 当前选中的索引
	const moneyIndex = ref(null)
	const timesIndex = ref(null)
	const orderType = ref(1) // 当前选中的索引
	const popupleft = ref(null)
	const popup = ref(null)
	const popup2 = ref(null)
	const popup3 = ref(null)
	const disabled = ref(true)
	const moneyNum = ref(0)
	const KData = ref([])
	const info = ref({})
	const timer = ref(null)
	const timer2 = ref(null)
	const second = ref(null)
	const msgError = ref('')
	const wsManager = ref(null)
	const creating = ref(false)
	const falg = ref(false)
	const huobiParams = ref([])
	// 默认5分钟  轮询时间
	const startTimes = ref(5 * 60 * 1000)
	const sliderStyle = computed(() => {
		// 根据选中项动态计算滑块位置
		return `transform: translateX(${ (selectedIndex.value * 50)+23}px);`; // 假设每个选项宽度为 60px
	})
	const opts = {
		extra: {
			tooltip: {
				showCategory: true,
			},
		},
	}
	const Candle = ref({
		categories: [],
		series: []
	})
	const closepopup2 = () => {
		popup.value.close()
		popup2.value.close()
	}
	const soundFeedback = ref(null);
	const errorSound = ref(null);
	const select = computed(() => {
		return userStore.getSelect()
	})

	const changeleft = (e) => {
		// console.log('changeleft',e);
		falg.value = e.show
	}
	const openProductListPage = () => {
		popupleft.value.open()
		falg.value = true
	}
	// 弹窗功能 start
	// 响应式数据
	const selectedValidityIndex = ref(0);
	const selectedAmountIndex = ref(2);
	const customAmountFocused = ref(false);

	// 有效期选项
	const validityOptions = ref([{
			time: '1分',
			profit: '85%'
		},
		{
			time: '3分',
			profit: '90%'
		},
		{
			time: '5分',
			profit: '95%'
		},
		{
			time: '5分',
			profit: '95%'
		}
	])

	// 投资金额选项
	const amountOptions = ref(['¥1000', '¥2000', '¥5000', '¥10000']);

	// 选择有效期
	const selectValidity = (index) => {
		selectedValidityIndex.value = index;
	}

	// 选择投资金额
	const selectAmount = (index) => {
		selectedAmountIndex.value = index;
		customAmountFocused.value = false;
	}

	// 自定义金额获取焦点
	const focusCustomAmount = () => {
		customAmountFocused.value = true;
		selectedAmountIndex.value = -1;
	}

	// 自定义金额失去焦点
	const blurCustomAmount = () => {
		customAmountFocused.value = false;
	}

	// 确认订单
	const confirmOrder = () => {
		alert('订单已确认！');
	};

	//弹窗 end
	// 选择k线图统计时
	const selectTime = (index) => {
		selectedIndex.value = index; // 更新选中项
		KData.value = []
		stopSSE();
		startSSE();
		// getKData()
	}
	// 选择金额
	const selectItems = (type, index) => {
		if (type == 1) {
			moneyIndex.value = index
			moneyNum.value = moneyList.value[index]
			console.log('moneyList.value[index]', moneyList.value[index])
		} else {
			timesIndex.value = index
		}
	}
	const focusInpMoney = () => {
		moneyIndex.value = 0
	}
	const tipMoneyVal = (e) => {
		// console.log('unfocusInpMoney', e)
		moneyNum.value = Number(e.detail.value)
		console.log(moneyNum.value);
		if (moneyNum.value < second.value[0].min_money || moneyNum.value > second.value[0].max_money) {
			uni.showToast({
				title: $t('product.text17', {
					min: second.value[0].min_money,
					max: second.value[0].max_money
				}),
				icon: 'none'
			});
		}
	}
	// 定义检查函数
	const checkValues = () => {
		disabled.value = !(timesIndex.value != null && (moneyIndex.value != null || moneyNum.value))
	};
	const validateInput = (e) => {
		// console.log('validateInput', e)
		// 通过正则表达式过滤非正整数
		// const value = e.target.value.replace(/[^0-9]/g, "");
		moneyNum.value = parseFloat(e.detail.value); // 更新为合法值
	};
	// 监听 
	watch([moneyIndex, moneyNum, timesIndex], checkValues);
	// const estimate = computed(()=>{
	// 	// let money = moneyNum.value ? moneyNum.value : moneyList.value[moneyIndex.value]
	// 	let money = moneyNum.value
	// 	// console.log('computed estimate money',money)
	// 	let rate = second.value[0].y_rate
	// 	// console.log('computed estimate rate',rate)
	// 	if(Number(money)){
	// 		return parseFloat(money) + money*rate/100
	// 	}
	// })
	const yue = computed(() => {
		return parseFloat(userIndex.value.money - moneyNum.value ? moneyNum.value : moneyList.value[moneyIndex
			.value])
	})
	// 买涨/买跌弹窗
	const toOrder = (index) => {
		orderType.value = index
		moneyNum.value = 0
		moneyIndex.value = null
		timesIndex.value = null
		popup.value.open()
	}
	const closePopup = () => {
		popup.value.close()
	}
	// 购买成功弹窗
	const dialogConfirm = () => {
		popup2.value.close()
		closePopup();
	}
	const options = ref({
		id: '',
		class: '',
		symbol: '',
	}); // 用于存储 opt.value 数据
	const productsInfo = ref({})
	onLoad((opt) => {
		// console.log(opt);
		// 将 opt 的数据存储到响应式变量中
		options.value = {
			id: opt.id || '',
			class: opt.class || '',
			symbol: opt.symbol || '',
		};
	})

	function generateCustomArray(min, max) {
		const result = [];
		let current = min;

		while (current <= max) {
			result.push(current);

			// 根据当前值动态调整步进值
			if (current < 500) {
				current += 400; // 从 100 到 500，步进为 400
			} else if (current < 1000) {
				current += 500; // 从 500 到 1000，步进为 500
			} else if (current < 2000) {
				current += 1000; // 从 1000 到 2000，步进为 1000
			} else if (current < 5000) {
				current += 3000; // 从 2000 到 5000，步进为 3000
			} else if (current < 10000) {
				current += 5000; // 从 5000 到 10000，步进为 5000
			} else {
				break;
			}
		}

		return result;
	}
	const currColor = computed(() => {
		return productsInfo.value.data.cha > 0 ? '#f33b50' : '#0bb563'
	})
	const getInfo = () => {
		timesList.value = []
		getProductsInfo({
			symbol: options.value.id
		}).then(res => {
			console.log('产品详情', res.data);
			productsInfo.value = res.data
			second.value = res.data.second
			// console.log('产品详情 second',res.data.second);
			if (!select.value.name) {
				userStore.setSelect({
					name: res.data.code,
					tick: res.data.data
				})
			}
			second.value.forEach(item => {
				timesList.value.push(item.second)
				moneyList.value = generateCustomArray(Number(item.min_money), Number(item.max_money));
			})

		})
	}
	watch(() => userStore.getSseData(), (newVal, oldVal) => {
		// console.log('新值到啦',newVal);
		for (const key in newVal) {
			if (newVal.hasOwnProperty(key) && productsInfo.value.code === key) {
				// console.log('匹配到啦',newVal[key]);
				productsInfo.value.data.price = newVal[key].data.price;
				productsInfo.value.data.amount = newVal[key].data.amount
				productsInfo.value.data.high = newVal[key].data.high;
				productsInfo.value.data.low = newVal[key].data.low;
				productsInfo.value.data.vol = newVal[key].data.vol
				productsInfo.value.data.open = newVal[key].data.open
				productsInfo.value.data.cha = newVal[key].data.cha
				productsInfo.value.data.zf_rate = newVal[key].data.zf_rate
			}
		}
	}, {
		immediate: true,
		deep: true
	})
	const getKData = () => {
		getKline({
			symbol: options.value.symbol,
			interval: timeList[selectedIndex.value].value
		}).then(res => {
			if (res.code == 1 && res.data) {
				KData.value = Array.isArray(res.data) ? res.data : Array.from(res.data)
				// KData.value = res.data
				// console.log('getKline', res.data)
			}
		})
	}

	const eventSource = ref(null)
	const startSSE = () => {
		if (!eventSource.value) {
			eventSource.value = new EventSource(config.API_URL +
				`/cache/getKline?symbol=${options.value.symbol}&interval=${timeList[selectedIndex.value].value}`);

			eventSource.value.onmessage = (event) => {
				const sseData = JSON.parse(decodeURIComponent(escape(window.atob(event.data))));
				// console.log('sseData',sseData);
				KData.value = Array.isArray(sseData) ? sseData : Array.from(sseData)
				// this.userStore.setSseData(sseData);
			};

			eventSource.value.onerror = (error) => {
				// console.error('SSE error:', error);
				// stopSSE(); // 出现错误时停止监听
			};
		}
	}
	const stopSSE = () => {
		if (eventSource.value) {
			eventSource.value.close(); // 关闭 EventSource
			eventSource.value = null; // 清空实例
		}
	}
	// 注册监听
	uni.$on('userInfoUpdated', (userInfo) => {
		// console.log('User info updated:', userInfo);
		// 更新页面中的数据
		userIndex.value = userInfo;
	});
	onShow(() => {
		console.log('onshow');
		startSSE();
	})
	onHide(() => {
		stopSSE();
	})
	// 页面销毁时移除监听
	onUnload(() => {
		uni.$off('userInfoUpdated');
		stopSSE();
	})
	onMounted(() => {
		userIndex.value = uni.getStorageSync('USERINDEX')
		getInfo()
		getKData()
	})

	onBeforeUnmount(() => {
		stopSSE();
	})
	const dialogClose = () => {
		popup2.value.close()
		uni.navigateTo({
			url: '/pages/personal/order/order'
		})
	}
	// 全部下单
	const allIn = () => {
		moneyNum.value = parseFloat(userIndex.value.money)
	}
	// 提交订单
	const submitForm = () => {
		if (creating.value) return;
		if (!timesList.value[timesIndex.value]) return;
		let num = moneyNum.value ? moneyNum.value : moneyList.value[moneyIndex.value]
		if (!num) return;
		if (moneyNum.value > parseFloat(userIndex.value.money)) {
			msgError.value = $t('product.text16')
			return popup3.value.open()
		}
		if (moneyNum.value >= second.value[0].min_money || moneyNum.value <= second.value[0].max_money) {
			creating.value = true
			uni.showLoading({
				title: '...',
			})
			createOrder({
				symbol: productsInfo.value.id,
				stime: timesList.value[timesIndex.value],
				price: moneyNum.value ? moneyNum.value : moneyList.value[moneyIndex.value],
				otype: orderType.value
			}).then(res => {
				// console.log(res);
				uni.hideLoading()
				popup.value.close()
				creating.value = false
				if (res.code == 1) {
					popup2.value.open()
					getUserInfo().then(res => {
						userIndex.value = res.data
						uni.setStorageSync('ISREALID', res.data.user_check_status)
						uni.setStorageSync('USERINDEX', res.data)
						// 广播更新事件
						uni.$emit('userInfoUpdated', res.data);
						userStore.setUserInfo(res.data);
					})
					// soundFeedback.value.playSound(); // 请求成功后播放声音
				} else {
					msgError.value = res.msg
					popup3.value.open()
				}
			}).catch(err => {
				creating.value = false
				uni.hideLoading()
				console.error('请求失败', err);
				// errorSound.value.playSound();
			})
		} else {
			uni.showToast({
				title: $t('product.text17', {
					min: second.value[0].min_money,
					max: second.value[0].max_money
				}),
				icon: 'none'
			});
		}

	}
	const backPage = () => {
		// 返回上一页
		// uni.navigateBack({
		//   delta: 1 // 默认值为1，表示返回上一页
		// });
		history.back()
	}
</script>
<style scoped>
	page {
		background-color: #21252F;
	}

	.overview {}

	.left {
		flex: 18;
		font-size: 30px;
		padding: 25px 0;
	}

	.center {
		margin: 0 20px 0 13px;
	}

	.right {
		flex: 28;
		padding: 12px 20px 12px 0;
	}

	.flex-c {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.overview .right .item {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.overview .right .item .value {
		margin-top: 2px;
	}

	.row1 {
		height: 100%;
	}

	.spark {
		width: 24px;
		height: 24px;
		background-color: #1a7acb;
		-webkit-animation: donghua 2.4s infinite;
		animation: donghua 2.4s infinite;
	}

	@keyframes donghua {
		0% {
			-webkit-transform: scale(1);
			transform: scale(1);
			box-shadow: none;
		}

		16% {
			-webkit-transform: scale(1);
			transform: scale(1);
			box-shadow: 0 0 0 5px rgba(26, 122, 203, .3);
		}

		32% {
			-webkit-transform: scale(1);
			transform: scale(1);
			box-shadow: 0 0 0 9px rgba(26, 122, 203, .2);
		}

		48% {
			-webkit-transform: scale(1);
			transform: scale(1);
			box-shadow: 0 0 0 13px rgba(26, 122, 203, .1);
		}

		64% {
			-webkit-transform: scale(1);
			transform: scale(1);
			box-shadow: 0 0 0 13px rgba(26, 122, 203, .2);
		}

		90% {
			-webkit-transform: scale(1);
			transform: scale(1);
			box-shadow: 0 0 0 5px rgba(26, 122, 203, .3);
		}

		100% {
			-webkit-transform: scale(1);
			transform: scale(1);
			box-shadow: none;
		}
	}

	.k-area {
		width: 100%;
		height: 450px;
		padding: 0px;
		box-sizing: border-box;
	}

	/* 时间选项样式 */
	.time-item {
		flex: 1;
		text-align: center;
		padding: 10px 0;
		font-size: 11px;
		color: #aaa;
		cursor: pointer;
		position: relative;
	}

	/* 选中项样式 */
	.time-item.active {
		color: var(--theme-text-color);
		font-weight: bold;
	}

	/* 滑块样式 */
	.slider {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 14px;
		/* 滑块宽度，与选项宽度一致 */
		height: 4px;
		background-color: #3c9cff;
		/* 滑块颜色 */
		border-radius: 2px;
		transition: transform 0.3s ease;
		/* 平滑过渡效果 */
	}

	.fixed-bottom {
		padding: 15px 20px;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 1020;
		padding-bottom: 25px;
		box-sizing: border-box;
	}

	.btn {
		width: 104px;
		border: unset;
		color: #fff;
		text-align: center;
		font-size: 15px !important;
	}

	.items {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-content: space-between;
		padding: 10px 0 0 0;
	}

	.items .item {
		margin-bottom: 10px;
		width: 105px;
		height: 52px;
		color: #999;
		opacity: 1;
		background-color: var(--theme-color);
	}

	.items .item.active {
		border: 1px solid #0bb563;
		color: #0bb563;
	}

	.popup-content {
		padding-top: 15px;
		min-height: 100px;
		border-radius: 15px 15px 0 0;
		position: relative;
	}

	.inputBox {
		padding: 0px 15px;
		border-radius: 12px;
		caret-color: #999;
	}

	.bg-light-black {
		background-color: var(--theme-color);
	}

	.u-input2 {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		flex: 1;
		padding: 13px 15px;
	}

	th {
		font-size: 32rpx;
		color: var(--theme-text-color);
		font-weight: 400;
	}

	td {
		text-align: center;
		font-size: 11px;
		padding: 4px 0;
	}

	::v-deep uni-button:after {
		border: none !important;
	}

	.buyInfo {
		width: 220px;
		min-height: 100px;
		background-color: var(--theme-box-bg);
		border-radius: 12px;
		box-sizing: border-box;
	}

	.btn-group {
		display: flex;
		flex-direction: row;
		border-top-color: #f5f5f5;
		border-top-style: solid;
		border-top-width: 1px;
	}

	.btn-b {
		display: flex;
		flex: 1;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 45px;
	}

	.border-l {
		border-left-color: #f0f0f0;
		border-left-style: solid;
		border-left-width: 1px;
	}

	.diy-dialog {
		color: #fc6d22;
		padding: 2px 8px;
		height: 21px;
		background: #f8e1c9;
		border-radius: 5px;
	}

	.charts {
		width: 100%;
		height: 404px;
	}

	.popup-height {
		height: 100%;
		width: 280px;
		flex: 1;
		padding: 45px 0px 26px;
	}

	.heavy-title {
		padding-left: 20px;
		font-size: 28px;
		font-family: PingFang SC-Heavy, PingFang SC;
	}

	.text-defalut {
		color: #222;
	}

	/* k线顶部导航 */
	.k-btnK {
		padding: 10px 10px;
	}

	/* 弹窗 */

	/* 弹窗容器样式 */
	.popup-container {
		background-color: #171717;
		border-radius: 12px;
		width: 100%;
		max-width: 350px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
		overflow: hidden;
		position: relative;
		border: 1px solid #585352;
	}

	/* 弹窗头部 */
	.popup-header {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0px 10px;
		border-bottom: 1px solid #333;
	}

	.popup-title {
		flex: 1;
		font-size: 18px;
		color: #b8860b;
	}

	.close-btn {
		background: none;
		border: none;
		color: #999;
		font-size: 20px;
		cursor: pointer;
		transition: color 0.3s;
	}

	.close-btn:hover {
		color: #fff;
	}

	/* 弹窗内容 */
	.popup-content {
		padding: 10px;
		padding-bottom: 30px;
	}

	.section-title {
		font-size: 13px;
		color: #6D6D6D;
		margin-bottom: 12px;
	}

	.scroll-container {
		display: flex;
		overflow-x: auto;
		gap: 12px;
		padding: 5px 0 15px 0;
		scrollbar-width: thin;
		scrollbar-color: #333 #1e1e1e;
		position: relative;
	}

	.scroll-container::-webkit-scrollbar {
		height: 5px;
	}

	.scroll-container::-webkit-scrollbar-thumb {
		background: #333;
		border-radius: 10px;
	}

	/* 有效期选项 */
	.validity-item {
		flex: 0 0 auto;
		width: 70px !important;
		background-color: #252525;
		border-radius: 8px;
		padding: 12px;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		border: 1px solid transparent;
		transition: border-color 0.3s;
	}

	.validity-item.selected {
		border-color: #3a6b9e;
	}

	.selected-badge {
		position: absolute;
		top: 0;
		right: 0;
		width: 0;
		height: 0;
		border-top: 25px solid #ffc107;
		border-left: 25px solid transparent;
		border-radius: 1px;
	}

	.selected-badge i {
		position: absolute;
		top: -22px;
		left: 3px;
		color: #000;
		font-size: 12px;
	}

	.settlement-time {
		font-size: 12px;
		color: #b8860b;
		margin-bottom: 5px;
	}

	.minutes {
		font-size: 16px;
		font-weight: 600;
		margin-bottom: 20px;
		color: #fff;
	}

	.profit {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: #90A2B0;
		color: #fa2e42;
		font-size: 12px;
		padding: 3px 8px;
		border-radius: 0 0 4px;
		text-align: center;
	}

	/* 投资金额部分 */
	.amount-scroll-container {
		display: flex;
		overflow-x: auto;
		gap: 12px;
		padding: 5px 80px 15px 0;
		scrollbar-width: thin;
		scrollbar-color: #333 #1e1e1e;
		position: relative;
	}

	.amount-scroll-container::-webkit-scrollbar {
		height: 5px;
	}

	.amount-scroll-container::-webkit-scrollbar-thumb {
		background: #333;
		border-radius: 10px;
	}

	.amount-item {
		flex: 0 0 auto;
		width: 80px;
		height: 40px;
		background-color: #252525;
		border-radius: 8px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 600;
		cursor: pointer;
		transition: all 0.3s;
	}

	.amount-item:hover,
	.amount-item.active {
		background-color: #333;
		border: 1px solid #3a6b9e;
	}

    .custom-amount{
		background-color: #293049 !important;
	}
	.custom-amount-container-box{
		position: fixed;
		right: 10px;
		background-color: #171717;
		padding-left: 7px;
		margin-right: 10px;
		
	}
	.custom-amount-container {
		
		width: 80px;
		height: 30px;
		z-index: 1028;
		opacity: 1;
		background-color: #293049 !important;
		display: flex;
		align-items: center;
		border-radius: 3px;
	}
	.custom-amount-input{
		background: transparent;
		border: none;
		color: #fff !important;
		width: 100%;
		text-align: center;
		outline: none;
		font-size: 14px;
	}
	
	.amount-item {
		flex: 0 0 auto;
		width: 60px;
		height: 30px;
		color: #DAE7FA;
		background-color: #293049;
		border-radius: 3px;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		transition: all 0.3s;
		font-size: 11px;
		font-weight: 300;
	}

	.amount-item:hover,
	.amount-item.active {
		background-color: #293049;
		border: 1px solid #0176FE;
		color: #0176FE;
	}


	

	/* 余额和分隔线 */
	.balance {
		font-size: 14px;
		color: #ccc;
		margin: 15px 0;
		text-align: left;
	}

	.divider {
		height: 1px;
		background-color: #333;
		margin: 15px 0;
	}

	/* 订单表格 */
	.order-table {
		width: 100%;
		border-collapse: collapse;
		margin: 15px 0px 25px 0px;
	}

	.order-table th {
		width: 20%;
		text-align: left;
		padding: 8px 5px;
		font-size: 14px;
		color: #999;
		font-weight: normal;
		text-align: center;
	}

	.order-table td {
		width: 20%;
		padding: 8px 5px;
		font-size: 14px;
	}

	.direction-up {
		color: #0cb785;
		font-weight: 600;
	}

	/* 确认按钮 */
	.confirm-btn {
		display: block;
		width: 80%;
		height: 40px;
		background-color: rgba(255, 255, 255, 0.2);
		color: #b8860b !important;
		border: none;
		border-radius: 5px;
		padding: 14px 0;
		font-size: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.confirm-btn:hover {
		background-color: #2c5282;
	}

	/* 响应式设计 */
	@media (max-width: 380px) {
		.validity-item {
			width: 80px;
		}

		.amount-item {
			width: 70px;
		}

		.custom-amount-container {
			width: 70px;
		}
	}
</style>